/*********************************************************************************
 ***                     CONFIDENTIAL  ---  SURUI STUDIOS                      ***
 *********************************************************************************
 *
 *                       项目 : Edoc
 *
 *                       文件 : doc.less
 *
 *                       开发 : 苏睿 / 317953536@qq.com
 *
 *                       开始 : 2021/11/22
 *
 *                       更新 :
 *
 *                       说明 : 文档
 *
 *********************************************************************************/

@import '../var';

#doc {
	max-width: 1224px;
	margin: 32px auto;
	display: flex;
	position: relative;
	> .ps {
		flex-shrink: 0;
	}
	.menu {
		width: 210px;
		font-size: 16px;
		color: @color-text-grey;
		padding-right: 12px;
		div {
			margin: 4px 0;
			padding-left: 24px;
			line-height: 32px;
			span {
				display: flex;
				align-items: center;
				padding-left: 24px;
				cursor: pointer;
				transition: @animate-time ease;
				a {
					display: inline-block;
					width: 100%;
				}
				i {
					font-size: 20px;
					margin-right: 4px;
					display: none;
				}
			}
		}
		> div {
			padding-left: 0;
		}
		.dir {
			> div {
				display: none;
			}
			> span {
				padding-left: 0;
				i {
					display: inline-block;
				}
			}
			.show {
				display: block;
				line-height: 32px;
			}
			.open {
				i {
					transform: rotate(90deg);
				}
			}
		}
		.current {
			background-color: rgba(117, 43, 236, 0.2);
			border-radius: @size-border-radius;
			span {
				a {
					color: lighten(@color-primary, 20%);
				}
			}
		}
	}
	.doc {
		flex: 1;
		font-size: 16px;
		line-height: 28px;
		min-width: 560px;
		padding-left: 4px;
		> .ps {
			padding-right: 16px;
		}
	}
	.side {
		width: 160px;
		position: sticky;
		border-left: 1px @color-form-border dashed;
		padding: 16px 0 0 16px;
		margin-left: 4px;
		flex-shrink: 0;
		position: relative;
		p {
			margin: 16px 0;
			cursor: pointer;
			color: @color-text-grey;
			&:nth-of-type(1) {
				margin-top: 0;
			}
		}
		.current {
			color: lighten(@color-primary, 20%);
		}
		.hl {
			opacity: 0;
			width: 4px;
			height: 16px;
			position: absolute;
			top: 0;
			left: -2px;
			background: @color-primary;
			border-radius: 50px;
			transition: @animate-time ease;
		}
		.show {
			opacity: 1;
		}
	}
}
